<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="108px">
      <el-form-item label="时间" prop="dateRange">
        <el-date-picker v-model="queryParams.dateRange" format='yyyy-MM-dd' value-format="yyyy-MM-dd" type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="班级" prop="classId">
        <el-select v-model="queryParams.classId" filterable placeholder="请选择班级" @change="getStuchange">
          <el-option v-for="item in classList" :key="item.id" :label="item.label" :value="parseInt(item.id)" size="small">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名" prop="stuId">
        <el-select v-model="queryParams.stuId" clearable filterable placeholder="请选择姓名">
          <el-option v-for="item in namelist" :key="item.value" :label="item.label" :value="item.value" size="small">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-col :span="12">
        <div ref="qygarden" style="height: 420px" />
      </el-col>
      <el-col :span="12">
        <div ref="applyqs" style="height: 420px" />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div ref="classmate" style="height: 420px" />
      </el-col>
      <el-col :span="12">
        <div ref="student" style="height: 420px" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import echarts from "echarts";
import { getSumPeopleList } from '@/api/base/ill'
import { selectClazz } from "@/api/base/clazz";
import { selectName } from '@/api/base/device'

export default {
  name: "gzt",
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dateRange: ''
      },
      qygarden: null,
      classmate: null,
      applyqs: null,
      student: null,
      classLeave: [],
      schoolLeave: {},
      sevenLeave: [],
      classList: [],
      namelist: [],
    };
  },
  created() {

  },
  mounted() {
    this.getList()
    //班级
    this.getQueryClazzList();
  },
  methods: {
    /**getList* */
    async getList() {
      try {
        this.loading = true;
        const params = {
          attendanceDate: this.queryParams
        }
        await getSumPeopleList(this.queryParams).then(res => {
          if (res.code == 200) {
            this.classLeave = res.data.classLeave
            this.schoolLeave = res.data.schoolLeave
            this.sevenLeave = res.data.sevenLeave
          }
        })
        this.qygarden = echarts.init(this.$refs.qygarden);
        this.applyqs = echarts.init(this.$refs.applyqs);
        this.classmate = echarts.init(this.$refs.classmate);
        this.student = echarts.init(this.$refs.student);
        // 幼儿生病占比
        this.studentEcharts()
        //全园请假报表
        this.echarts()
        //幼儿请假趋势
        let data = this.sevenLeave
        this.echarts02(data, '幼儿请假趋势', this.applyqs)


        this.loading = false;
        //班级请假人数
        let data02 = this.classLeave
        this.echarts02(data02, '班级请假', this.classmate)
        let that = this
        this.classmate.getZr().on('mouseover', function (param) {
          that.getstudent(data02[param.target.dataIndex].name)
        })

      } catch (e) {
        console.log(e)
      }
    },
    async getstudent(title) {
      try {
        let data02 = this.classLeave
        this.echarts02(data02, title, this.student)
      } catch (e) {
        console.log(e)
      }
    },
    /** 查询班级列表 */
    async getQueryClazzList() {
      try {
        this.loading = true;
        const { rows } = await selectClazz();
        this.classList = rows.map(item => {
          return {
            id: item.id,
            label: item.title,
          }
        })
        this.loading = false;
      } catch (e) {
        console.log(e)
      }
    },
    getStuchange() {
      this.getNamelist();
      this.$set(this.queryParams, 'stuId', null)
    },
    /**查询用户列表*/
    async getNamelist() {
      try {
        const obj = {
          schoolCode: this.$store.getters.schoolCode,
          classId: this.queryParams.classId
        }
        this.loading = true;
        const data = await selectName(obj)
        this.namelist = data.rows.map(item => {
          return {
            label: item.name,
            value: item.id,
          }
        })
      } catch (e) {
        console.log(e)
      }
    },
    /* *全园请假报表* */
    echarts() {
      let that = this
      let img =
        "";
      let trafficWay = [
        {
          name: "总学生数",
          value: this.schoolLeave.schoolPeople,
        },
        {
          name: "请假学生数",
          value: this.schoolLeave.leavePeople,
        }
      ];

      let data = [];
      let color = [
        "#00ffff",
        "#00cfff",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000",
      ];
      for (let i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i],
              },
            },
          },
          {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false,
                },
                labelLine: {
                  show: false,
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0,
              },
            },
          }
        );
      }
      let seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [105, 109],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#333",
                formatter: function (params) {
                  if (params.name !== "") {
                    return params.name + "\n" + "\n" + params.value + "人";
                  } else {
                    return "";
                  }
                },
              },
              labelLine: {
                length: 30,
                length2: 50,
                show: true,
                color: "#fff",
              },
            },
          },
          data: data,
        },
      ];
      this.qygarden.setOption({
        color: color,
        title: {
          text: `全园请假${this.schoolLeave.leavePeople}人`,
          top: "48%",
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: "#333",
            fontSize: 14,
            fontWeight: "400",
          },
        },
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 178,
                height: 178,
              },
              left: "center",
              top: "center",
              position: [100, 100],
            },
          ],
        },
        tooltip: {
          show: false,
        },
        legend: {
          icon: "circle",
          orient: "horizontal",
          x: 'center',
          y: 10,
          data: ["总学生数", "请假学生数"],
          // right: 0,
          // bottom: 0,
          align: "right",
          textStyle: {
            color: "#333",
          },
          itemGap: 20,
        },
        toolbox: {
          show: false,
        },
        series: seriesOption,
      })
    },
    /**幼儿请假趋势 */
    echarts02(data, title, name) {
      let that = this
      //判断超过20条数据出现滚动条
      data = data.sort(function (a, b) {
        return a.value - b.value
      })
      let zoomdata = [];
      if (data.length > 20) {
        zoomdata = [{
          type: 'inside',
          show: true,
          xAxisIndex: [0],
          start: 0,//默认为1
          end: 80,//默认为100
        },
        {
          type: 'slider',//slider表示有滑动块的，inside表示内置的
          start: 0,//默认为0  可设置滚动条从在后进行展示
          end: 50,//默认为100
          show: true,
          xAxisIndex: [0],
          handleSize: 0,//滑动条的 左右2个滑动条的大小
          height: 12,//组件高度
          left: '5%', //左边的距离
          right: '5%',//右边的距离
          bottom: -2,//右边的距离
          borderColor: "#f5f4f4",
          fillerColor: '#d7d5d5',
          backgroundColor: '#f5f4f4',//两边未选中的滑动条区域的颜色
          // showDataShadow: false,//是否显示数据阴影 默认auto
          showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
          realtime: true, //是否实时更新
          filterMode: 'filter',
          handleStyle: {
            borderRadius: '20',
          },
        }]
      }
      name.setOption({
        title: {
          text: title,
          x: 'center',

        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: data.map(item => { return item.name }),
          axisLabel: { interval: 0, rotate: 30 }
        },
        dataZoom: zoomdata,
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value}人'
          },
        },
        series: [
          {
            data: data,
            type: 'bar',
            showBackground: false,
            barWidth: 20,
            itemStyle: {
              normal: {
                //这里是颜色
                color: '#1088f8'
              }
            }
          }
        ]
      })

    },
    studentEcharts() {
      this.student.setOption({
        title: {
          text: '病假原因统计',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: '名称',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 0, name: '流行性感冒' },
              { value: 0, name: '手足口病' },
              { value: 0, name: '猩红热' },
              { value: 0, name: '肺炎' },
              { value: 0, name: '麻疹' },
              { value: 0, name: '水痘' },
              { value: 0, name: '百日咳' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              normal: {
                show: true,
                formatter: '{b}: {d}%' // 显示名称和百分比
              }
            }
          }
        ]
      });
    },
    /**班级请假人数**/

    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
  }
};
</script>
